<!DOCTYPE html>
<html lang="en">
 
<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon" href="static/CANDY.ico" type="image/x-icon"/>
	<title>白嫖怪都来白嫖</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
 
		body {
			display: flex;
			justify-content: center;
			align-items: center;
			min-height: 100vh;
			flex-direction: column;
			gap: 30px;
			background: #222;
		}
 
		.inputBox {
			position: relative;
			width: 400px;
		}
 
		.inputBox input {
			width: 100%;
			padding: 10px 0 5px;
			background: transparent;
			outline: none;
			box-shadow: none;
			border: none;
			color: #fff;
			font-size: 3em;
			letter-spacing: 0.1em;
			transition: 0.5s;
		}
 
		.inputBox span {
			position: absolute;
			left: 0;
			padding: 10px 0 5px;
			pointer-events: none;
			font-size: 3em;
			color: rgba(255, 255, 255, 0.5);
			text-transform: uppercase;
			/* 定义无小写字母，仅有大写字母 */
			letter-spacing: 0.1em;
			/* 是增加（值为正）或减少（值为负）字符间距 */
			transition: 0.5s;
		}
 
		.inputBox input:valid~span,
		/* 表单元素的值需要根据指定条件验证时设置指定样式 */
 
		.inputBox input:focus~span
 
		/* 选择具有焦点的时候 */
			{
			color: #b0a4e3;
			transform: translateY(-40px);
			/* 将文字向Y轴（向上）平移16px */
			font-size: 1.95em;
		}
 
		.inputBox i
 
		/* 可见的一个线 */
			{
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 2px;
			background: #fff;
			overflow: hidden;
		}
 
		.inputBox i::before
 
		/* 在i标签的左边创建（伪元素）一个跟i等大的一条线，加上炫彩颜色 */
			{
			content: '';
			position: absolute;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, #EEBD89, #D13ABD, #C973FF, #6CC6CB, #9FA5D5, #EAD6EE);
			animation: runing 1s linear infinite;
			transition: 0.5s;
		}
 
		.inputBox input:valid~i::before,
		.inputBox input:focus~i::before {
			left: 0;
		}
 
		/* 创建动画 */
		@keyframes runing {
			0% {
				background-position-x: 0;
			}
 
			100% {
				background-position-x: 250px;
			}
		}
	</style>
</head>
{% if link %}
<script>window.location.href='{{link}}'</script>
{% endif %}
 
<body>
	<div class="inputBox">
        <form action="{{ request.path }}" method="post" id="form"  onsubmit="return false;">
            <input type="text" name="link" id="link" required="required" onkeydown="handleEnterKey(event)">
		    <span>视频链接</span><i></i><label for="link"></label>
        </form>
	</div>
</body>
<script>
    function handleEnterKey(event) {
        if (event.key === "Enter") {
            document.querySelector('#form').submit();
        }
    }
</script>
 
</html>